<template>
  <div>
    <div class="title currentMonthIncomeTitle"></div>
    <div class="moduleBody">
      <div class="shouNumber incomeBar">
        <span class="numberText">本月车行总收入 </span>
        <span class="numberBox">
          <div class="numContainer" v-if="carShow">
            <span v-for="(item, index) in currentMonth?.totalNumber" :key="index">
              <DigitalTransform
                :value="item"
                :interval="800"
                :dislocation="false"
                v-if="index !== 2"
              ></DigitalTransform>
              <span v-else>
                <DigitalTransform
                  :value="item"
                  :interval="800"
                  :dislocation="false"
                ></DigitalTransform>
                <span style="margin-right: 5px"> , </span>
              </span>
            </span>
            <span style="color: rgba(255, 255, 255, 0.4)">
              （单位：{{ currentMonth.totalRevenue > 10000 ? '万元' : '元' }}）
            </span>
          </div>
          <!-- <span  v-for="(item, index) in currentMonth?.totalNumber" :key="index">
            <span class="number" v-if="index!==2">
              {{ item }}
            </span>
            <span  v-else>
            <span class="number">   {{ item }}</span>
           ,
            </span>
        </span> -->
        </span>
      </div>
      <div class="incomeBarTitle">
        <span class="incomText">本月月卡总收入</span>
        <span class="incomePercent">
          {{ currentMonth?.cardRevenue }}
          <span class="incomeUnit"> 元 </span>
          <span v-if="currentMonth.cardRevenueTrend === 'keep'" class="trendKeep">-- </span>
          <span v-else-if="currentMonth.cardRevenueTrend === 'reduce'" class="trendReduce"></span>
          <span v-else-if="currentMonth.cardRevenueTrend === 'increase'" class="trendIncrease">
          </span>
        </span>
      </div>
      <div class="progressBox">
        <a-progress
          :stroke-color="{
            '0%': '#98e6ff',
            '100%': '#00a3ff'
          }"
          :percent="(currentMonth?.cardRevenue / currentMonth?.totalRevenue) * 100"
          :show-info="false"
        />
      </div>

      <div class="incomeBarTitle">
        本月停车总收入
        <span class="incomePercent"
          >{{ currentMonth?.parkingRevenue }} <span class="incomeUnit"> 元 </span>
          <span v-if="currentMonth.parkingRevenueTrend === 'keep'" class="trendKeep">-- </span>
          <span
            v-else-if="currentMonth.parkingRevenueTrend === 'reduce'"
            class="trendReduce"
          ></span>
          <span
            v-else-if="currentMonth.parkingRevenueTrend === 'increase'"
            class="trendIncrease"
          ></span>
        </span>
      </div>
      <div class="progressBox">
        <a-progress
          :stroke-color="{
            '0%': '#ffbc11',
            '100%': '#ff7152'
          }"
          :percent="(currentMonth?.parkingRevenue / currentMonth?.totalRevenue) * 100"
          :show-info="false"
        />
      </div>
    </div>
    <div class="title currentCarIncomeTitle"></div>
    <div class="moduleBody">
      <div class="chartPie" ref="pieChart"></div>
      <div class="chartPieDefine">
        <span class="charPieIcon lightBlue"> 月卡车辆</span>
        <span style="display: inline-block; margin-right: 40px"
          >{{ pieData.cardProportion * 100 }}%
        </span>
        <span class="charPieIcon darkBlue"> 临时车辆 </span>{{ pieData.tempProportion * 100 }}%
      </div>
    </div>
    <div class="title currentYearIncomeTitle"></div>
    <div class="moduleBody">
      <div class="barChartTitile">
        <span>单位：元</span>
        <span> <span class="blueBarIcon"></span> <span class="redBarIcon"></span> 收入情况</span>
      </div>
      <div class="chartBar" ref="barChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getYearIncon, getMonthIncome, getCurremtMonthIncom } from '@/services/car'
import { Progress } from 'ant-design-vue'
import DigitalTransform from 'vue-digital-transform'

export default {
  name: 'moudleTwo',
  components: {
    AProgress: Progress,
    DigitalTransform
  },
  inject: ['carShow'],
  data() {
    return {
      pieData: {},
      currentMonth: {},
      barOption: {},
      pieOption: {}
    }
  },
  mounted() {
    this.initData().then(() => {
      this.initChart()
    })
  },
  methods: {
    initData: async function () {
      const BarRes = await getYearIncon()
      const PieRes = await getMonthIncome()
      this.pieData = PieRes
      this.barOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          // 让图表占满容器
          top: '10px',
          left: '0px',
          right: '0px',
          bottom: '0px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            data: BarRes.monthList
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '行车年度收入',
            type: 'bar',
            barWidth: '10px',
            data: BarRes.revenueList.map((item, index) => {
              const color =
                index % 2 === 0
                  ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0.23, color: '#74c0f8' },
                      { offset: 1, color: 'rgba(116,192,248,0.00)' }
                    ])
                  : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0.23, color: '#ff7152' },
                      { offset: 1, color: 'rgba(255,113,82,0.00)' }
                    ])
              return { value: item, itemStyle: { color } }
            })
          }
        ]
      }
      this.pieOption = {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            return `${params.seriesName}</br><div style='display:flex;justify-content: space-between;'><div>${params.marker}${params.name}</div><div>${params.percent}%</div></div>`
          }
        },
        series: [
          {
            name: '本月车辆收费类型分布',
            type: 'pie',
            radius: '94%',
            center: ['50%', '50%'],
            data: [
              { value: PieRes.cardProportion, name: '月卡车辆', itemStyle: { color: '#75C0F8' } },
              { value: PieRes.tempProportion, name: '临时车辆', itemStyle: { color: '#5076FF' } }
            ],
            roseType: 'radius',
            label: {
              show: false
            }
          }
        ]
      }
      const currentMonthIncome = await getCurremtMonthIncom()

      let num = currentMonthIncome.totalRevenue
      num = num > 10000 ? Math.floor(num / 10000) : num
      let digits = num.toString().split('')

      let reversArr = digits.reverse()
      let myNum = reversArr
      for (let index = 0; index < 6; index++) {
        if (!myNum[index]) {
          myNum[index] = '0'
        }
      }
      this.currentMonth = { ...currentMonthIncome, totalNumber: myNum.reverse() }
    },
    initChart: function () {
      const myBarChart = echarts.init(this.$refs.barChart)
      const myPieChart = echarts.init(this.$refs.pieChart)
      window.addEventListener('resize', function () {
        myBarChart.resize()
        myPieChart.resize()
      })
      myBarChart.setOption(this.barOption)
      myPieChart.setOption(this.pieOption)
    }
  }
}
</script>

<style scoped lang="scss">
.incomePercent {
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #ffffff;
  .incomeUnit {
    margin: 0 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
  }
  .trendKeep {
    color: #40454e;
  }

  .trendReduce {
    display: inline-block;
    width: 10px;
    height: 20px;
    background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/%E4%B8%8B%E7%AE%AD%E5%A4%B4%402x.png')
      no-repeat center center / contain;
  }
  .trendIncrease {
    display: inline-block;
    width: 10px;
    height: 20px;
    background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/%E4%B8%8A%E7%AE%AD%E5%A4%B4%402x.png')
      no-repeat center center / contain;
  }
}
.currentMonthIncomeTitle {
  background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/%E6%9C%AC%E6%9C%88%E8%BD%A6%E8%A1%8C%E6%94%B6%E5%85%A5%E5%88%86%E6%9E%90%402x.png')
    no-repeat 0 0 / contain;
}
.currentCarIncomeTitle {
  background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/%E6%9C%AC%E6%9C%88%E8%BD%A6%E8%BE%86%E6%94%B6%E8%B4%B9%E7%B1%BB%E5%9E%8B%E5%88%86%E5%B8%83%402x.png')
    no-repeat 0 0 / contain;
}
.currentYearIncomeTitle {
  background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/%E8%BD%A6%E8%A1%8C%E5%B9%B4%E5%BA%A6%E6%94%B6%E5%85%A5%E5%88%86%E6%9E%90%402x.png')
    no-repeat 0 0 / contain;
}
.chartBar {
  width: 100%;
  height: 220px;
}
.chartPie {
  margin: 20px auto 0;
  width: 210px;
  height: 210px;
}
.chartPieDefine {
  margin: 30px 0 10px;
  text-align: center;
}

.charPieIcon {
  margin-right: 10px;
  font-size: 14px;
  color: #c6d1db;
}

.charPieIcon::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
}

.lightBlue.charPieIcon::before {
  background-color: #75c0f8;
}

.darkBlue.charPieIcon::before {
  background-color: #5076ff;
}

.currenIncom {
  height: 56px;
  background: linear-gradient(
    to right,
    rgba(103, 116, 160, 0),
    rgba(57, 71, 120, 0.38),
    rgba(103, 116, 160, 0)
  );
}

.incomeBarTitle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  height: 30px;
}

.incomeBar {
  height: 56px;
  margin-bottom: 20px;
}

.incomText {
  font-size: 14px;
  color: #ffffff;
}

.barChartTitile {
  display: flex;
  margin-bottom: 25px;
  justify-content: space-between;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  color: #c6d1db;
  .blueBarIcon {
    display: inline-block;
    width: 12px;
    height: 4px;
    vertical-align: middle;
    background: linear-gradient(to right, #74c0f8, rgba(116, 192, 248, 0));
  }
  .redBarIcon {
    display: inline-block;
    width: 12px;
    height: 4px;
    vertical-align: middle;
    background: linear-gradient(to right, #ff7152, rgba(255, 113, 82, 0));
  }
}

:deep(.ant-progress-inner) {
  height: 4px;
  background-color: #40454e;
}
</style>
